<?php
$url = 'code.php';
//if($_GET['type']=='pycharm'){
//    $url = 'code.php?type=pycharm';
//}else if($_GET['type']=='idea'){
//    $url = 'code.php?type=idea';
//}
?>
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>
<body>
<div id="app">
    <el-table
        :data="codes"
        stripe
        style="width: 100%">
        <el-table-column
            fixed
            prop="name"
            label="激活码种类"
            width="300">
        </el-table-column>
        <el-table-column
            prop="value"
            label="激活码"
            width="1000">
        </el-table-column>
        <el-table-column
            fixed="right"
            label="操作"
            width="120">
            <template slot-scope="scope">
                <el-button
                    id="copyMe"
                    @click="copy(scope.$index, codes)"
                    type="text"
                    size="small">
                    复制
                </el-button>
            </template>
        </el-table-column>
    </el-table>
</div>
</body>
<!--@click="copy(scope.$index, codes)"-->
<!-- 先引入 Vue -->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/clipboard@2.0.6/dist/clipboard.min.js"></script>
<script>
    var app = new Vue({
        el:"#app",
        data:{
            codes: []
        },
        methods:{
            send(){
                axios({
                    method:'get',
                    url:"<?php echo $url;?>"
                }).then(function(res){
                    app.codes = res.data;
                    console.log(res.data);
                });
            },
            copy(index,data){
                var clipboard = new ClipboardJS("#copyMe",{
                    text : function(){
                        //寻找被激活的那个div pre元素,同时获取它下面的内容
                        //alert(data[index]['value']);
                        return data[index]['value'];
                    }
                });

                clipboard.on('success',function(e){
                    alert("已复制到粘贴板！");
                    console.log(e);
                });

                clipboard.on('error',function(e){
                    console.log(e);
                });
            }
        },
        mounted(){
            this.send()
        }
    });
</script>
</html>